<!-- BrowsingHistoryView.vue -->
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';

const router = useRouter();
const browsingHistory = ref([]);

// 从 localStorage 获取浏览记录
const getBrowsingHistory = () => {
  const history = localStorage.getItem('browsingHistory');
  if (history) {
    browsingHistory.value = JSON.parse(history);
  } else {
    browsingHistory.value = [];
  }
};

// 清空浏览记录
const clearHistory = () => {
  showConfirmDialog({
    title: '清空记录',
    message: '确定要清空所有浏览记录吗？',
  }).then(() => {
    browsingHistory.value = [];
    localStorage.removeItem('browsingHistory');
  }).catch(() => {
    // 取消操作
  });
};

// 删除单条记录
const removeItem = (index) => {
  showConfirmDialog({
    title: '删除记录',
    message: '确定要删除这条浏览记录吗？',
  }).then(() => {
    browsingHistory.value.splice(index, 1);
    localStorage.setItem('browsingHistory', JSON.stringify(browsingHistory.value));
  }).catch(() => {
    // 取消操作
  });
};

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  const now = new Date();

  // 如果是今天
  if (date.toDateString() === now.toDateString()) {
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }

  // 如果是今年
  if (date.getFullYear() === now.getFullYear()) {
    return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
  }

  // 其他情况显示完整日期
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

onMounted(() => {
  getBrowsingHistory();
});
</script>

<template>
  <div class="browsing-history-container">
    <div class="header">
      <van-nav-bar
        title="浏览记录"
        left-arrow
        @click-left="router.back()"
      >
        <template #right>
          <van-icon
            name="delete"
            size="18"
            @click="clearHistory"
            v-if="browsingHistory.length > 0"
          />
        </template>
      </van-nav-bar>
    </div>

    <div class="history-content" v-if="browsingHistory.length > 0">
      <van-list finished>
        <div
          v-for="(item, index) in browsingHistory"
          :key="index"
          class="history-item"
        >
          <div class="item-content" @click="router.push(item.path)">
            <div class="item-image">
              <img :src="item.image || 'https://img01.yzcdn.cn/vant/cat.jpeg'" alt="商品图片">
            </div>
            <div class="item-info">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-price">¥{{ item.price }}</div>
              <div class="item-time">{{ formatTime(item.timestamp) }}</div>
            </div>
          </div>
          <van-icon
            name="cross"
            class="delete-icon"
            @click.stop="removeItem(index)"
          />
        </div>
      </van-list>
    </div>

    <div class="empty-history" v-else>
      <van-empty description="暂无浏览记录" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.browsing-history-container {
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .history-content {
    padding: 16px;

    .history-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: var(--van-background-2);
      border-radius: 8px;
      margin-bottom: 12px;
      position: relative;

      .item-content {
        display: flex;
        flex: 1;
        align-items: center;
        cursor: pointer;

        .item-image {
          width: 80px;
          height: 80px;
          border-radius: 4px;
          overflow: hidden;
          margin-right: 12px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .item-info {
          flex: 1;

          .item-title {
            font-size: 16px;
            color: var(--van-text-color);
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .item-price {
            font-size: 16px;
            color: var(--van-red);
            font-weight: bold;
            margin-bottom: 4px;
          }

          .item-time {
            font-size: 12px;
            color: var(--van-text-color-3);
          }
        }
      }

      .delete-icon {
        position: absolute;
        top: -8px;
        right: -8px;
        background: var(--van-gray-1);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--van-gray-6);
      }
    }
  }

  .empty-history {
    margin-top: 100px;
  }
}

[data-theme="dark"] {
  .history-content .history-item {
    background: var(--van-background-2);
  }
}
</style>